<template>
  <div class="serveBox">
    <div class="foucs"><img src="../../assets/u313.png" alt=""></div>
    <div>
      <div  class="business">
        <img src="../../assets/u318.png" alt="">
        <span>业务办理</span>
      </div>
      <!-- 条目 -->
      <div class="items">
        <div @click="goPayNotice">
          <span class="iconfont iconjiaofei jiaofei"></span>
          <span>缴交费用</span>
        </div>
        <div @click="goRefundNotice">
          <span class="iconfont icontuikuanshuoming tuikuan"></span>
          <span>退款须知</span>
        </div>
        <div></div>
      </div>
    </div>
    <!-- 缴费须知 -->
    <mt-popup
      v-model="popupVisible"
      position="bottom">
      <div class="notice">
        <div class="tou">
          <div class="title">缴费须知</div>
          <span class="cha" @click="cancel">x</span>
        </div>
        <div class="content">
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
          xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </div>
        <mt-button class="btn" @click="understand" type="primary">我已了解</mt-button>
      </div>
    </mt-popup>

    <!-- 选择缴费的用户框 -->
    <div class="selectBox" :style="{display: isShow}">
      <div>缴费用户</div>
      <div>选择缴费用户</div>
      <div class="payTypes">
        <div @click="personPayment">个人缴费</div>
        <div @click="gongPayment">工商缴费</div>
      </div>
    </div>
    <!-- 遮盖罩 -->
    <div class="cover" :style="{display: isShow}"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      popupVisible: false,
      isShow: 'none'
    }
  },
  created () {},
  methods: {
    goPayNotice () {
      this.popupVisible = true
    },
    cancel () {
      this.popupVisible = false
    },
    understand () {
      this.popupVisible = false
      this.isShow = 'block'
    },
    personPayment () {
      this.$router.push('/personPayment')
    },
    gongPayment () {
      this.$router.push('/companyPayment')
    },
    // 跳转到退款须知页面
    goRefundNotice () {
      this.$router.push('/refundNotice')
    }
  }

}
</script>

<style lang="less" scoped>
  .foucs img {
    width: 100%;
  }
  .business img {
    margin: 10px 10px 10px 18px;
    vertical-align: middle;
  }
  .business span {
    font-family: 'Arial Normal', 'Arial';
    font-weight: 500;
    font-style: normal;
    font-size: 15px;
  }
  .items {
    display: flex;
  }
  .items div {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 117px;

    .jiaofei, .tuikuan {
      font-size: 30px;
      font-weight: 400;
    }
    .jiaofei {
      color: #488DF0;
    }
    .tuikuan {
      color: #8BD07B;
    }
    span:nth-child(2) {
      font-size: 13px;
      font-weight: 400;
      color: #333333;
      margin: 7px;
    }
  }

  .serveBox {
    position: relative;
    height: 100%;
    /deep/ .mint-popup {
      width: 100%;
    }
    /deep/ .v-modal {
      opacity: 0;
    }
  }
  .notice {
    font-size: 13px;
    .cha {
      position: absolute;
      right: 15px;
      top: -10px;
      font-size: 22px;
      line-height: 22px;
      padding: 5px;
    }
    .title {
      text-align: center;
      font-weight: 700;
      color: #333;
      margin-top: 20px;
    }
  }
  .tou {
    position: relative;
  }
  .content {
    margin: 40px;
    height: 200px;
    word-wrap: break-word;
  }
  .btn {
    height: 40px;
    width: 90%;
    margin-left: 5%;
    background-color: #F59E0E;
    margin-bottom: 20px;
    font-size: 13px;
  }
  .selectBox {
    position: absolute;
    z-index: 100;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    width: 262px;
    height: 152px;
    font-size: 13px;
    background-color: #fff;
  }
  .selectBox > div:nth-child(1) {
    box-sizing: border-box;
    height: 43px;
    line-height: 43px;
    padding-left: 30px;
    background-color: #F59E0E;
    border-radius: 8px;
    color: #fff;
  }
  .selectBox > div:nth-child(2) {
    height: 73px;
    line-height: 63px;
    text-align: center;
    font-weight: 500;
    color: #1E1E1E;
  }
  .payTypes {
    display: flex;
    justify-content: space-around;
    div {
      width: 78px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      background-color: #F59E0E;
      color: #fff;
      border-radius: 10px;
    }
  }

  .cover {
    position: absolute;
    top: 0;
    z-index: 99;
    width: 100%;
    height: 100%;
    background-color: #F4F4F4;
    opacity: 0.5;
  }

</style>
